<%@ page language="java"  pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp" %>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>点球网-创建比赛</title>
		<link href="css/css.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="js/jquery.datePicker-min.js" type="text/javascript"></script>
		
		<script type="text/javascript" src="${ctx}/js/jquery.js" ></script>	
		<script type="text/javascript" src="${ctx}/js/jquery.ui.datepicker.js" ></script>	
		<script type="text/javascript" src="${ctx}/js/jquery.ui.core.js" ></script>
		<script type="text/javascript">

		$(document).ready(function() {
		    $("#matchdate").datepicker();
		 });
		
		function SetDropDownList(requesturl,ObjDropDownList,Parmjson,AddFirst,AddFirstStr,AddFirstValue,SelectValue)
		{
		    for(j=0;j<ObjDropDownList.options.length;j++)
			{
				ObjDropDownList.remove(j);
				j--;
			} 
			$.ajax({
			    type:"post",
			    url:requesturl,
			    data:Parmjson,
			    dataType:"xml",
			    success: function(xml){
		
				     if(AddFirst){
				      	ObjDropDownList.options.add(new Option(AddFirstStr,AddFirstValue));
				     }
				     
				     $(xml).find("List").each(function(i){
					        var id_value=$(this).children("ValueField").text(); //get value
					        var text_value=decodeURIComponent($(this).children("TextField").text()); //get text  
					        var opt = new Option();
					        opt.value=id_value;
					        opt.text=text_value;
					        opt.title=text_value;
					        if(SelectValue==id_value)  
					        {    
					         opt.selected=true;
					        }
					        ObjDropDownList.options.add(opt);
				     });
			    }
			    ,
			    error: function(xml){
		//	        alert('Error loading XML document'+xml);
			    }
		    });
		}
	
		
		function showHomeTeam(leagues){
			var leagueId= leagues;
			if(leagueId != ""){
				 document.getElementById("hometeam").style.display="";
				 var url="create-match!getClubsByLeague.action";
				 var parm={LeagueId:leagueId};
				 var hometeamObj=document.getElementById("hometeam");
				 var defaultStr='Select One';
				 SetDropDownList(url,hometeamObj,parm,true,defaultStr,"","");
				 var visitingteamObj=document.getElementById("visitingteam");
				 SetDropDownList(url,visitingteamObj,parm,true,defaultStr,"","");
				
			}else{
				
				document.getElementById("hometeam").style.display="none";
				document.getElementById("visitingteam").style.display="none";
				document.getElementById("matchdate").style.display="none";
				document.getElementById("matchtime").style.display="none";
			}
		}
		
		function showVisitingTeam(homeTeam){
			var homeTeamId= homeTeam;
			var leagueId = document.getElementById("leagues").value;
			if(homeTeamId != ""){
				document.getElementById("visitingteam").style.display="";
				var url="create-match!getClubsByLeague.action";
				var parm={LeagueId:leagueId};
				var visitingteamObj=document.getElementById("visitingteam");
				var defaultStr='Select One';
				SetDropDownList(url,visitingteamObj,parm,true,defaultStr,"","");
				
			}else{
				document.getElementById("visitingteam").style.display="none";
				document.getElementById("matchdate").style.display="none";
				document.getElementById("matchtime").style.display="none";
				
			}
		}
		 
		function showMatchDate(visitingTeam){
			var visitingTeamId= visitingTeam;
			if(visitingTeamId != ""){
				document.getElementById("matchdate").style.display="";
				document.getElementById("matchtime").style.display="";
			}else{
				document.getElementById("matchdate").style.display="none";
				document.getElementById("matchtime").style.display="none";
			}
		}
		
		function chooseMatchTime(){
			
			$("#matchdate").datepicker('option', 'dateFormat', 'yy-mm-dd'); 
		}
		
		function checkSave(){
			var leagueId = document.getElementById("leagues").value;
			var hometeamId = document.getElementById("hometeam").value;
			var visitingteamId = document.getElementById("visitingteam").value;
			var matchdateStr = document.getElementById("matchdate").value;
			var matchtimeStr = document.getElementById("matchtime").value;
			if(leagueId == ""){
				alert("You should choose a league!");
				return;
			}if(hometeamId == ""){
				alert("You should choose a home team!");
				return;
			}if(visitingteamId == ""){
				alert("You should choose a visiting team!");
				return;
			}if(matchdateStr == ""){
				alert("You should choose a matech date!");
				return;
			}if(matchtimeStr == ""){
				alert("You should input a match time!");
				return;
			}if(hometeamId == visitingteamId){
				alert("Home team should not be same as visiting team!");
				return;
			}
			else{
				var parm=/^\w+([-+.]\w+)*:\w+([-.]\w+)*$/;
				if(!parm.test(document.getElementById("matchtime").value))
				{
					alert("Match time is not correct!");
					return;
				}if(document.getElementById("matchtime").value.length>5){
					alert("Match time is not correct!");
					return;
				}else{
					document.forms[0].action="create-match!save.action"
					document.forms[0].submit();
				}
				
			}
		}
		
		</script>
	</head>
	<body>
		<form action="">
		<div id="head">
			<div class="topnav">
				<ul>
					<li class="tn1"><a href="${ctx}/user-follow-clubs!showUserFollowClubs.action">主页</a></li>
					<li class="tn2"><a href="#">买彩</a></li>
					<li class="tn3"><a href="#">提彩</a></li>
					<li class="tn4"><a href="#">查账</a></li>
					<li class="tn5"><a href="#">客服</a></li>
					<li class="tn6"><a href="#">规则</a></li>
					<li class="tn7"><a href="#">注册</a></li>
					<li class="tn8"><a href="#">声明</a></li>
					<li class="tn9"><a href="#">刷新</a></li>
					<li class="right"><a href="#">齐达内，账户彩金：1000元，冻结彩金：200元。</a></li>
				</ul>
			</div>
			
			<div class="logo">
				<div class="cnav">
					<ul>
						<li class="cn1"><a href="${ctx}/create-match!create.action">创建比赛</a></li>
						<li class="cn2"><a href="${ctx}/match!listMatchDefault.action">查看比赛</a></li>
						<li class="cn3"><a href="${ctx}/bet!bet.action">用户下注</a></li>
						<li class="cn4"><a href="${ctx}/bet!listBet.action">查看下注</a></li>
						<li class="cn5"><a href="${ctx}/user-follow-clubs!showUserFollowClubs.action">关注球队</a></li>
					</ul>
				</div>
			</div>
			<div class="message">最新消息，本站注册用户可申请为“超级彩民”用户，超级彩民用户拥有高额返彩的机会。</div>
		</div>
		
		
		<div id="center">
			<div class="here">
				<span></span>您现在的位置：
				<a href="${ctx}/user-follow-clubs!showUserFollowClubs.action">点球网</a> &raquo; 
				<a href="#">创建比赛</a>
			</div>
			
			<div class="cbody">
				<div class="cjbs">
					<ul>
						<li class="cjbs1">联赛信息</li>
						<li class="cjbs2">主队信息</li>
						<li class="cjbs3">客队信息</li>
						<li class="cjbs4">比赛日期</li>
						<li class="cjbs5">比赛时间</li>
					</ul>
				</div>
		
				<div class="cjbslb">
					<ul>
						<li class="cjbs1">
							<select name="leagues" id="leagues" onchange="showHomeTeam(this.value)">
								<option value="">Select One</option>
								<c:forEach var="leaguesList" items="${leaguesList}">
									<option value="${ leaguesList.lgId}"> ${ leaguesList.lgNameEn}</option>
								</c:forEach>
							</select>
						</li>
						
						<li class="cjbs2">
							<select name="hometeam" id="hometeam" style="display: none" onchange="showVisitingTeam(this.value)"></select>
						</li>
						
						<li class="cjbs3">
							<select name="visitingteam" id="visitingteam" style="display: none" onchange="showMatchDate(this.value)"></select>
						</li>
						
						<li class="cjbs4">
							<input type="text" name="matchdate" id="matchdate" style="display: none" readonly="readonly" onclick="chooseMatchTime()" />
						</li>
						
						<li class="cjbs5">
							<input type="text" id="matchtime" name="matchtime" style="display: none" />
						</li>
					</ul>
					<div class="cjbsbut">
						<input type="submit" value="提交" id="button" onclick="checkSave()"/>
					</div>
				</div>
			</div>
		</div>
		
		
		<div id="footer">
			<div class="fnav">
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a> | 
				<a href="#">关于我们</a>
			</div>
			<div class="bq">
			Copyright ? 2010 点球网 保留所有版权。
			</div>
		</div>
		</form>
	</body>
</html>
